<template>
	<view >
		
		<view class="main_bag ">
			<image :src="src" class="imagebag"></image>
			<view class="logo_top">
				<image :src="src2" class="imagebag2"></image>
				<view class="logo_name">南卜子app</view>
			</view>
			
			<view class="coment_bag">
				<view class="tab_choose">
					<view @click="tochoose(1)" class="item">
						<view :class="chooseindex==1?'name_yes':'name_no'">App会员</view>
						<image :src="xian" class="imagebag4" v-if="chooseindex==1"></image>
					</view>
					<view @click="tochoose(2)" class="item">
						<view :class="chooseindex==2?'name_yes':'name_no'">自定义打赏</view>
						<image :src="xian" class="imagebag4" v-if="chooseindex==2"></image>
						</view>
				</view>
				
				<!-- APp会员 -->
				<view class="huiyuan" v-if="chooseindex==1">
					<view class="vip_babu" >
							<view v-if="choosedex==1" class="vip_babubag" >
								<image :src="vipbag" class="vipbag"></image>
								<view class="vip_coment">
									<view class="font1"><view>八字正宗「合集专享」</view>
										<view class="unit">￥<view class="price">128</view><view>/月</view></view></view>
									<view class="font2">解锁「八字正宗合集」的全部视频内容</view>
									<view class="font2">可与南卜子老师直接建立联系</view>
									<view class="font2">每月提供两次专属视频答疑</view>
								</view>
								
							</view>
							<view v-else class="vip_babubag2" :class="choosedex==1?'magtop':''" @click="toChooseTable(1)">
								<image :src="vipnobag" class="vipbag2" ></image>
								<view class="vip_coment2">
									<view class="font1">
										<view>八字正宗「合集专享」</view>
										<view class="unit">￥<view class="price">128/年</view></view>
									</view>
								</view>
							</view>
					</view>
					
					<view class="vip_babu" >
							<view v-if="choosedex==2" class="vip_babubag" :class="choosedex==2?'magto2p':''">
								<image :src="vipbag" class="vipbag"></image>
								<view class="vip_coment">
									<view class="font1"><view>免广告会员</view>
										<view class="unit">￥<view class="price">98</view><view>/月</view></view></view>
									<view class="font2">免除app内解锁视频所需的激励式广告</view>
									<view class="font2">清爽畅看视频</view>
									<view class="font2">享有专属课程</view>
								</view>
								
							</view>
							<view v-else class="vip_babubag2"  :class="choosedex==1?'magtop':''"  @click="toChooseTable(2)">
								<image :src="vipnobag" class="vipbag2" ></image>
								<view class="vip_coment2">
									<view class="font1">
										<view>免广告会员</view>
										<view class="unit">￥<view class="price">98/年</view></view>
									</view>
								</view>
							</view>
					</view>
					<!-- 底部切换 -->
					<view class="table">
						<view
						  v-for="(item, index) in tablelist" 
						  :key="index"
						  class="tab-item"
						  :class="currentIndex === index ? 'bagimage_yes' : 'bagimage_no' "
						  @click="switchTab(index)"
						>
						  <text class="tab-text" style="color: #000;">{{ item.title }}</text>
						  <text class="tab-text" style="color: #D33F57;">￥{{ item.price }}</text>
						  <text class="tab-text" style="color: #666;">{{ item.remark }}</text>
						</view>
					</view>
					<!-- 立即购买 -->
					<view class="btn-back">
						<view class="login_btn2"  @click="loginBtnClick" > 立即购买</view>
					</view>
				</view>
				<!-- 打赏 -->
				<view v-else class="tip">
					<view>请选择金额</view>
					<view class="table2">
						<view
						  v-for="(item, index) in tipnumber" 
						  :key="index"
						  class="tab-item"
						  :class="currentIndex2 === index ? 'bagimage_yes2' : 'bagimage_no2' "
						  @click="switchTab2(index)"
						>
						  <text :class="currentIndex2 === index ? 'tab-textyes' : 'tab-textno' "  v-if="index<7">￥{{ item.price }}</text>
						 <input v-else type="tel" v-model="tipvalue" placeholder="自定义" placeholder-class="holder-info" class="inputnumber"/>
						</view>
					</view>
					<!-- 立即购买 -->
					<view >
						<view class="login_btn2"  @click="loginBtnClick" > 立即打赏</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import GoodsList from '@/components/goodslist.vue'
	export default {
		 components: {
		    GoodsList
		  },
		data() {
			return {
				src:"https://img.nanbuzi.com/wximage/huiayuan_bag.png",
				src2:require("@/static/image/vip/logotime.png"),
				xian:require("@/static/image/vip/huixian.jpg"),
				vipbag:require("@/static/image/vip/huiyuan_yes.png"),
				vipnobag:require("@/static/image/vip/vip_nochoose.png"),
				chooseindex:1,
				choosedex:1,
				currentIndex:0,
				currentIndex2:0,
				tipvalue:"",
				books: [
				        { 
				          title: '月度会员',
				          price: "128",
						  remark:""
				        },
				        { 
				          title: '季度会员',
				          price: "298",
				          remark:"立省86元"
				        },
				        { 
				         title: '半年会员',
				         price: "498",
				         remark:"立省270元"
				        },
				        { 
				         title: '年度会员',
				         price: "798",
				         remark:"立省738元"
				        }
				],
				tipnumber: [
				        { 
				          price: "2"
				        },
				        {
				          price: "6"
				        },
				       {
				         price: "18"
				       },
					   {
					     price: "68"
					   },
					   {
					     price: "88"
					   },
					   {
					     price: "108"
					   },
					   {
					     price: "168"
					   },
					   {
					     price: "200"
					   },
				],
				books2: [
				        { 
				          title: '一年度',
				          price: "98",
						  remark:""
				        }
				],
				tablelist:""
			}
		},
		onLoad() {
			this.tablelist=this.books
		},
		methods: {
			tochoose(item){
				this.chooseindex=item
			},
			toChooseTable(item){
				console.log("点击了",item)
				this.choosedex=item
				if(item==1){
					this.tablelist=this.books
				}else{
					this.tablelist=this.books2
				}
				
			},
			switchTab(item){
				this.currentIndex=item
			},
			switchTab2(item){
				this.currentIndex2=item
			},
		}
	}
</script>

<style scoped lang="scss">
	
	.imagebag {
	  width: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 240px;
	  z-index: 1; /* 明确设置基础层级 */
	}
	.logo_top{
		position: relative;
		top: 40px;
		z-index: 12; 
		display: flex;
		flex-direction: column;
		align-items: center;
		.imagebag2{
			height: 70px;
			width: 70px;
		}
		.logo_name{
			font-size: 14px;
			color: #000;
			margin-top: 10px;
		}
	}
	
	.coment_bag{
		width: 100%;
		border-radius:20px ;
		background-color: #ffffff;
		position: absolute;
		top: 200px;
		z-index: 200;
		.tab_choose{
			display: flex;
			flex-direction: row;
			margin-top: 20px;
			justify-content: space-around;
			font-size: 13px;
			align-items: center;
			.item{
				height: 30px;
				.name_yes{
					color: #333333;
				}
				.name_no{
					color: #999999;
				}
				.imagebag4{
					width: 30px;
					height: 2px;
					margin: auto;
					margin-top: 10px;
				}
			}	
		}
		.huiyuan{
			display: flex;
			flex-direction: column;
			.vip_babu{
				.vip_babubag{
					position: relative;
					.vipbag{
						 width: 100%;
						 height: 125px;
						 position: absolute;
						 top: 0;
						 left: 0;
					}
					.vipbag2{
						width: 91%;
						height: 80px;
						position: absolute;
						margin-left: 15px;
						 position: absolute;
						 top: 0;
						 left: 0;
					}
					.vip_coment2{
						position: absolute;
						top: 25px;
						left: 30px;
						width: 83%;
						font-size: 13px;
						.font1{
							width: 100%;
							color: #333;
							margin-top: 3px;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							.unit{
								font-size: 12px;
								display: flex;
								flex-direction: row;
							}
						}
					}
					.vip_coment{
						position: absolute;
						top: 20px;
						left: 30px;
						width: 83%;
						font-size: 13px;
						.font1{
							width: 100%;
							color: #333;
							margin-top: 3px;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							.unit{
								font-size: 12px;
								display: flex;
								flex-direction: row;
								.price{
									color: red;
								}
							}
						}
						.font2{
							color: #666666;
							margin-top: 3px;
						}
					}
				}
				.magtop{
					top: 120px;
				}
				.magto2p{
					top:70px;
				}
				.vip_babubag2{
					position: relative;
					.vipbag2{
						 width: 91%;
						 height: 80px;
						 position: absolute;
						 margin-left: 15px;
						 top: 0;
						 left: 0;
					}
					.vip_coment2{
						position: absolute;
						top: 25px;
						left: 30px;
						width: 83%;
						font-size: 13px;
						.font1{
							width: 100%;
							color: #333;
							margin-top: 3px;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							.unit{
								font-size: 12px;
								display: flex;
								flex-direction: row;
							}
						}
					}
					
				}
			}
		}
	}
	.table{
		position: relative;
		margin-left: 15px;
		top: 220px;
		display: flex;
		flex-direction: row;
		z-index: 200;
		.bagimage_yes{
			background-image: url("../../../static/image/vip/huichoose_yes.png");
			background-size: 80% auto;/* 或 contain/100% 根据需求选择 */
			background-repeat: no-repeat;
			background-position: center;
		}
		.bagimage_no{
			background-image: url("../../../static/image/vip/huichoose_no.png");
			background-size: 80% auto;/* 或 contain/100% 根据需求选择 */
			background-repeat: no-repeat;
			background-position: center;
		}
		.tab-item{
			width: 24%;
			height: 90px;
			text-align: center;
			font-size: 10px;
			display: flex;
			flex-direction: column;
			.tab-text{
				margin-top: 10px;
			}
		}
	}
	.login_btn2 {
		width: 90%;
		height: 90rpx;
		background-color: #e34234;
		font-size: 32rpx;
		border-radius: 50rpx;
		opacity: 1;
		border-color: #e34234 ;
		color: #ffffff;
		justify-content: center;
		margin-left: 20px;
		align-items: center;
		display: flex;
		position: relative;
		bottom: -300px;
		left: 0;
	}
	.tip{
		font-size: 13px;
		margin: 10px;
		.table2{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			.bagimage_yes2{
				background-image: url("../../../static/image/vip/choose_moneyyes.png");
				background-size: 70% auto;/* 或 contain/100% 根据需求选择 */
				background-repeat: no-repeat;
				background-position: center;
			}
			.bagimage_no2{
				background-image: url("../../../static/image/vip/choose_moneyno.png");
				background-size: 70% auto;/* 或 contain/100% 根据需求选择 */
				background-repeat: no-repeat;
				background-position: center;
			}
			.tab-item{
				width: 24%;
				height: 60px;
				text-align: center;
				font-size: 10px;
				display: flex;
				margin-top: 10px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.tab-textyes{
					color: #6CAEFF;
				}
				.tab-textno{
					color: #666666;
				}
				.inputnumber{
					font-size: 12px;
				}
			}	
		}
		.login_btn2 {
			width: 90%;
			height: 90rpx;
			background-color: #e34234;
			font-size: 32rpx;
			border-radius: 50rpx;
			opacity: 1;
			border-color: #e34234 ;
			color: #ffffff;
			justify-content: center;
			margin-left: 20px;
			align-items: center;
			display: flex;
			position: relative;
			bottom: -200px;
			left: 0;
		}
	}
</style>
